<template>
	<view style="padding: 10px;">
		<view class="custom-search-border">
		  <view class="custom-search-bar">
		        <!-- 左侧搜索输入框 -->
		        <input
		          class="search-input"
		          v-model="description"
		          placeholder="请输入搜索内容"
		          placeholder-class="placeholder-style"
		          @confirm="onSearch"
				  @input="onInput"
		        />
				<!-- 清除图标 -->
				<view v-if="showClear" class="clear-button" @click="onClear">
				    <uni-icons type="clear" size="18" color="#999"></uni-icons>
				</view>
		        <!-- 右侧搜索按钮 -->
		        <view class="search-button" @click="onSearch">
		          <text class="button-text">搜索</text>
		        </view>
		      </view>
		    <view class="uni-slect-view">
		    	<uni-row :gutter="2" class="uni-row-select">
		    		<uni-col :span="22">
		    			<view class="uni-select-col">
		    			<uni-data-select
		    				v-model="problemType"
		    				:localdata="problemList"
		    				@change="problemChange"
		    				:clear="false"
		    			></uni-data-select>
		    			</view>
		    		</uni-col>
		    		<uni-col :span="2">
						<!--  @click="toggle('bottom')" -->
		    			<view class="uni-col-select-view"><image src="/static/select1.svg" style="width: 24px;height: 24px;margin-top: 5px;"></image></view>
		    		</uni-col>
		    	</uni-row>
		    </view>
			  <!-- <view><uni-datetime-picker v-model="rangeTime" type="datetimerange" :clearIcon="false"  @change="changeLog" @maskClick="maskClick" /></view> -->
		</view>
		<view style="margin-top: 10px;">
			<scroll-view 
				scroll-y 
				:style="{ height: '85vh' }" 
				@scrolltolower="handleScrollToLower"
			>
				<uni-list>
					<uni-list-item  v-for="(item, index) in tableData" :key="index" :clickable="true"  @click="viewInfor(item.id)" >
					<!-- 自定义 header -->
					    <template v-slot:header>
					    	<view style="width: 100%;">
									<text class="header-title">{{ item.description }}</text>
								<view style="margin-top: 10px;">
									<view class="uni-header-tag">
										<uni-tag class="header-tag" :text="item.state" :type="item.state === '已处理' ? 'success': item.state === '待处理' ? 'warning' : 'error'" />
									</view>
									<uni-row style="width: 100%;">
										<uni-col :span="15">
											<view class="header-shop">{{ item.workshop }}-<label v-if="item.lineName != null">{{ item.lineName }}-</label>  {{ item.workshoparea }}</view>
										</uni-col>
										<uni-col :span="9" style="text-align: right;">
											<view class="header-note">{{ item.createTime }}  </view>
										</uni-col>
									</uni-row>
									
									
									<!-- <text class="header-note" :style="{ color: item.state === '已处理' ? '#18bc37' : (item.state === '待处理' ? '#f3a73f' : '#e43d33')}">{{item.state}}</text> -->
								</view>
							</view>
					    </template>
					</uni-list-item>
				</uni-list>
				<uni-load-more :status="isNoMore ? 'noMore' : 'loading'" /> <!-- 加载状态提示‌:ml-citation{ref="5,6" data="citationList"} -->
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { post, postForm } from '../../../utils/request.js';
	export default {
		data() {
			return {
				problemType: 'TPM',
				problemList: [
					{ value: 'TPM', text: "TPM" },
					{ value: 'SBGNDJ', text: "设备功能点检" },
					{ value: 'SBJDCQ', text: "设备精度点检(厂区)" },
					{ value: 'SBJDSB', text: "设备精度点检(设备)" },
				],
				userInfor: uni.getStorageSync('userInfor'),
				isRectify: '',
				title: '',
				showClear: false, // 是否显示清除按钮
                description: '', // 用户的搜索输入
				state: [1],
				rangeTime: [Date.now() - 7*24*3600*1000, Date.now()],
				isLoading: false, // 加载锁
				isNoMore: false,  // 数据是否加载完毕
                range: [
                    { value: 0, text: "已处理" },
					{ value: 1, text: "待处理" },
					{ value: 2, text: "暂时无法处理" },
				],
				current: 1,
				total: 1,
				pageSize: 9,
				FormData: {
					description: '',
					code: '',
					pass: ''
				},
				tableData: [],
				single:  new Date(),
				mediaType: ['image', 'audio']
			}
		},
		watch: {
			//使用watch来响应数据的变化，第一个参数为newVal新值，第二个参数oldVal为旧值
			description: function(newVal, oldVal) {
				this.clearData = true
				this.current = 1
				//debugger
			}
		},
		onShow() {
			//debugger
			let that = this
			this.rangeTime = [Date.now() - 7*24*3600*1000, Date.now()]
			this.userInfor = uni.getStorageSync('userInfor')
			uni.$on('switchTabData', (data) => {
			      console.log('接收到的参数:', data); // { id: 123, name: 'test' }
				  let id = data.id
				  if(id == 1) {
					  //debugger
					that.stateValue = 3
					that.onSearch()	
				  }
			});
		},
		onHide() {
			// 使用后移除监听，避免重复触发
			uni.$off('switchTabData');
		},
		onLoad() {
			this.rangeTime = [Date.now() - 7*24*3600*1000, Date.now()]
			this.onSearch();
		},
		onReachBottom() {
		    if (this.isLoading || this.isNoMore) return; // 避免重复加载‌:ml-citation{ref="3,6" data="citationList"}
		    this.searchData();
		  },
		methods: {
			clickInter(){
			},
			 // 输入框内容变化时触发
			onInput(e) {
			    this.description = e.detail.value;
			    this.showClear = this.description.length > 0; // 根据输入内容显示/隐藏清除按钮
			},
			// 点击清除按钮时触发
			onClear() {
			    this.description = ''; // 清空输入框
			    this.showClear = false; // 隐藏清除按钮
			},
			  //选择框变化
			  problemChange() {
				this.clearData = true
				this.current = 1
				this.onSearch()
			  },
			//搜索功能
			  onSearch() {
				  this.current = 1
				  this.tableData = []
				  this.isLoading = true;
				  let prame = {
					  curret: this.current,
					  description: this.description,
					  size: this.pageSize,
					  userId: this.userInfor.userId,
					  problemType: this.problemType
				  }
				  post('/problem/findPending', prame)
				      .then(data => {
				  		if(data.code == 200) {
							this.clearData = false
							if(data.data == '没有整改人权限！') {
								uni.showToast({
								   icon: 'none',
								  title: '该用户没有整改人权限！'
								});
								this.isLoading = false;
								this.isNoMore = true
							} else {
								if(data.data.list.length === 0) {
									this.isLoading = false;
									this.isNoMore = true
								} else {
									this.tableData = data.data.list
									this.isNoMore = data.data.total <= this.tableData.length;
									this.isLoading = false;
								}
							}
				  		} else {
				  			  uni.showToast({
				  			    icon: 'none',
				  			    title: data.message
				  			  });
				  		}
				      })
				      .catch(err => {
				          uni.showToast({
				             icon: 'none',
				            title: '获取数据异常，请联系管理员！'
				          });
							this.isLoading = false;
							this.isNoMore = true
				      });
			  },
			  viewInfor(id) {
				  uni.navigateTo({
				      url: '/pages/position/handel/posHand?id=' + id // 跳转页面的路径
				  });
			  },
			  searchData(pagNumber) {
				  //debugger
				  this.isLoading = true;
				  let prame = {
				  		curret: pagNumber,
				  		description: this.description,
				  		size: this.pageSize,
					    userId: this.userInfor.userId,
						problemType: this.problemType
				  }
				  post('/problem/findPending', prame)
				      .then(data => {
				  		if(data.code == 200) {
				  			this.clearData = false
				  			//debugger
				  			if(data.data.list.length === 0) {
				  				this.isLoading = false;
				  				this.isNoMore = true
				  			} else {
				  				let data2 = data.data.list
				  				let data1 = this.tableData
				  				this.tableData = [...data1, ...data2];
								//debugger
				  				this.isNoMore = data.data.total <= this.tableData.length;
				  				this.current++;
				  				this.isLoading = false;
				  			}
				  			//this.tableData = data.data.list
				  		} else {
				  			  uni.showToast({
				  			    icon: 'none',
				  			    title: data.message
				  			  });
				  		}
				      })
				      .catch(err => {
				          uni.showToast({
				             icon: 'none',
				            title: '获取数据失败，请检查接口返回'
				          });
				      });
			  },
			  handleScrollToLower() {
			      if (!this.isNoMore) {
					let pageDta = this.current+1
					this.searchData(pageDta);
				  }
			    },
		    change(e) {
				this.single = e
				console.log('change事件:', this.single = e);
						},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			changeLog() {
				this.clearData = true
				this.current = 1
				this.onSearch()
			},
			maskClick(e){
				this.clearData = true
				this.current = 1
				this.onSearch()
			}
		}
	}
</script>

<style>
	.uni-date-x {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    justify-content: center;
	    border-radius: 4px;
	    background-color: rgba(237, 237, 237, 0.9) !important;
	    color: #666;
	    font-size: 14px;
	    flex: 1;
	}
	.uni-list {
		background-color: rgba(237, 237, 237, 0.9) !important;
	}
	.uni-list-item {
		margin-bottom: 5px;
		border-radius: 8px;
	}
	.uni-list-item__container {
	  display: flex !important;
	  padding-right: 0px !important;
	  flex-direction: column;  /* 垂直排列 */
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.uni-list-item text {
		display: block; /* 确保文字是块级显示 */
		color: #000; /* 设置文字颜色，确保与背景色不同 */
	},
.view-List {
	margin-bottom: 10px;
},
		.form-type-input {
			text-align: left;
		    line-height: 35px;
			font-size: 12px;
		}
	.uni-input{
		position: relative;
		display: block;
		height: 100%;
		background: none;
		color: inherit;
		opacity: 1;
		font: inherit;
		line-height: inherit;
		letter-spacing: inherit;
		text-align: inherit;
			text-indent: inherit;
		text-transform: inherit;
		text-shadow: inherit;
		text-align: left;
		/* border: 2px; */
		border: 1px solid #999 !important;
		/* margin: 3px; */
	}
	.form-type-text {
		text-align: left;
		border: 1px solid #999 !important;
		line-height: 35px;
		border-radius: 5px;
		color: rgba(0, 0, 0, 0.6);
		/* margin: 3px; */
	}
	.layout-form-btn {
		text-align: center;
	}
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
		}
	.uni-btn{
		margin-top: 20px;
		text-align: center;
		width: 100%;
	}
	.mini-btn{
		display: inline;
		width: 50%;
	}
	.form-up-file {
		margin-left: 10px;
	}
	.uni-left{
		text-align: center;
		width: 50%;
		display: inline-block;
	}
	.uni-right{
		text-align: center;
		width: 50%;
		display: inline-block;
	}
	.example-body {
		background-color: #fff;
    }
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
	/* 搜索框样式 */
	.custom-search-border {
		background-color: #fff;
	  border-radius: 5px; /* 圆角 */
	  padding: 5px 10px;
	  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
	  /* border: 1px solid rgb(153, 153, 153); */
	}
	/* 自定义搜索框样式 */
	.custom-search-bar {
	  display: flex;
	  align-items: center;
	  padding-bottom: 5px;
	}
	/* 搜索输入框样式 */
	.search-input {
	  flex: 1;
	  height: 30px;
	  padding: 0 10px;
	  font-size: 14px;
	  color: #333;
	}
	/* 清除按钮样式 */
	.clear-button {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  padding: 5px;
	  margin-right: 10px;
	  cursor: pointer;
	}
	/* 输入框占位符样式 */
	.placeholder-style {
	  color: #999;
	  font-size: 14px;
	}
	
	.uni-slect-view {
	    align-items: center;
		border-top: 1px solid rgba(237, 237, 237, 0.9);
		line-height: 36px;
		text-align: center;
		background-color: #fff;
	}
	.uni-select-col {
		background-color: #fff;
		border-radius: 5px;
	}
	.uni-select {
		font-size: 12px !important;
	}
	.uni-col-select-view {
	   display: flex;
	   align-items: center;
	   justify-content: center;
		font-size: 13px;
		color: #666;
		line-height: 36px;
	}
	/* 搜索按钮样式 */
	
	.search-button {
	  //padding: 8px 16px;
	  margin-left: -1px; /* 去除按钮和输入框之间的间隙 */
	  border-left: none; /* 去除按钮左侧的边框 */
	  font-size: 15px !important;
	  padding: 5px 10px;
	  border-radius: 4px; /* 右侧圆角 */
	  background-color: #007aff; /* 按钮背景色 */
	  color: #fff; /* 按钮文字颜色 */
	}
	/* 搜索按钮文字样式 */
	.button-text {
	  color: #ffffff;
	  font-size: 14px;
	}
	.header-title {
	  font-size: 16px;
	  color: #000;
	  font-weight: 400;
	}
	.header-note {
		margin-top: 5px;
		font-size: 12px;
		text-align: right !important;
	    color: #000;
	}
	.header-shop {
		margin-top: 5px;
		color: rgb(153, 153, 153) !important;
		font-size: 12px;
	}
	.uni-header-tag {
		text-align: right;
	},
	.header-tag {
		display: inline-block !important;
	},
	.uni-select__input-text {
	    width: 100%;
	    color: #666 !important;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    -o-text-overflow: ellipsis;
	    overflow: hidden;
	}
	//筛选条件
	.filter-drop-down {
	  position: relative;
	  width: 100%;
	  padding-bottom: 10px;
	}
	.filter-item {
		display: inline-block;
		width: 50%;
	}
	.uni-select-item {
		display: inline-block;
		width: 60%;
	}
	.uni-lable {
		font-size: 13px;
		color: black;
	}
	.uni-page-class {
		display: flex;
        align-items: center; /* 垂直居中 */
	}
	.pag-left-item {
		display: inline-block;
		width: 70%;
	}
	.pag-right-item {
		display: flex;
        align-items: center; /* 垂直居中 */
		justify-content: space-between;
		//padding-left: 10px;
		width: 30%;
	}
	.uni-input {
		display: inline-block;
	    padding: 3px 10px;
		width: 30%;
	}
	.tag-item {
		display: inline-block;
		width: 30%;
		background-color: #f0f0f0;
		padding: 5px 10px;
		border-radius: 5px;
	}
</style>
